<template>
  <div>
    <!-- <h1 ref="child">张三</h1>
    <button @click="changeName">改变名字</button> -->
    <!-- <button @click="onChangeName">改变名字</button> -->
    <ul>
      <li
        v-for="(item, index) of students"
        :key="item.id"
        :ref="el => { if (el) list[index] = el }"
      >
        <!--
          组合式 API 模板引用在 v-for 内部使用时没有特殊处理。
          相反，请使用函数引用执行自定义处理

          el 对应的元素本身 如果存在就添加进list数组里面
        -->
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

export default {
  name: 'Children',
  // methods: {
  //   changeName() { // vue2 中在元素上使用ref
  //     this.$refs.child.innerText = '李四';
  //   }
  // },
  setup(props) {

    // const child = ref(null); // 一般给一个元素赋值时初始值为null

    // const changeName = () => { // vue3 中获取 使用模板引用 ref
      // DOM 元素将在初始渲染后分配给 ref
    //   console.log(child.value);
    //   child.value.innerText = '李四';
    // }

    // return {
    //   child,
    //   changeName
    // }
    const list = ref([]);

    const students = reactive([
      {
        id: 1,
        name: '张三'
      },
      {
        id: 2,
        name: '李四'
      },
      {
        id: 3,
        name: '王五'
      }
    ])

    onMounted(() => {
      // console.log(list.value);
      console.log(list.value[0]);
    })

    return {
      students,
      list
    }
  }
}
</script>

<style>

</style>